// 获取分类并渲染
function renderCategory() {
    $.ajax({

        url: '/admin/links',
        success: function(res) {
            if (res.status === 0) {
                // console.log(res);

                let str = '';
                res.data.forEach(item => {
                        str += `
          <tr>
          <td>${item.id}</td>
              
              <td>
              <div class="bg">
              <img src='http://localhost:8888/uploads/${item.linkicon}'>
              </div>
              </td>
              <td>${item.linkname}</td>
              <td>${item.linkurl}</td>
              <td>${item.linkdesc}</td>
              <td>
              <button data-id="${item.id}" data-name="${item.linkname}" data-alias="${item.linkurl}" data-desc="${item.linkdesc}" type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id="${item.id}" type="button" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
              </td>
            </tr>
          `
                    })
                    //把str放到tbody中
                $('tbody').html(str);
            }
        }
    })
}
renderCategory();



// ======================================添加==========================================

let addIndex;
$('button:contains("添加链接")').on('click', function() {
    addIndex = layer.open({
        type: 1,
        title: '添加链接',
        content: $('#tpl-add').html(),
        area: ['500px', '350px']
    });
    // 图片
    $('button:contains("上传图片")').on('click', function() {
        $('#linkFile').click()
    })
    $('#linkFile').change(function(e) {
            const objectURL = URL.createObjectURL(e.target.files[0])
            $('#preIcon').attr('src', objectURL)
        })
        // =================上传文件================
    $('#add-form').on('submit', function(e) {
        console.log(11);
        e.preventDefault();
        let data = new FormData(this)
        $.ajax({
            type: 'POST',
            url: '/admin/links',
            data: data,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.status === 0) {
                    layer.msg(res.message);
                    // 关闭弹层
                    layer.close(addIndex);
                    renderCategory();

                }
            }
        });
    })

})










//============================================编辑类别=====================================

//表单是动态创建，所以需要使用事件委托

$('body').on('submit', '#edit-form', function(e) {
    e.preventDefault();
    let data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: `admin/links/${id}`,
        data: data,
        success: function(res) {

            if (res.status === 0) {
                layer.msg(res.message)
                renderCategory();
                layer.close(addIndex);
            }
        }
    })
})

let editIndex;
let id
$('tbody').on('click', 'button:contains("编辑")', function(e) {
    id = $(this).data('id');
    editIndex = layer.open({
        type: 1,
        title: '编辑友情链接',
        content: $('#edit-form-tpl').html(),
        area: ['500px', '350px'],
        success: function() {
            $.ajax({

                url: `/admin/links/${id}`,

                success: function(res) {
                    console.log(res);
                    $('#edit-form input[name=linkname]').val(res.data.linkname);
                    $('#edit-form input[name=linkurl]').val(res.data.linkurl);
                    $('#edit-form input[name=linkdesc]').val(res.data.linkdesc);
                    $('#preIcon').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon)
                    layer.msg(res.message)
                    renderCategory();

                    // 绑定文件上传按钮点击事件
                    $('#urlIcon').click(function() {
                            $('#linkFile').click()
                        })
                        // 监听文件选中事件
                    let file = null
                    $('#linkFile').change(function(e) {
                        const objectURL = URL.createObjectURL(e.target.files[0])
                        file = e.target.files[0]
                        $('#preIcon').attr('src', objectURL)
                        console.log(objectURL, 'ui');
                    })

                    $('#edit-form').submit(function(e) {
                        e.preventDefault()
                        var fd = new FormData(this);

                        if (file != null) {
                            fd.get('linkicon', file)
                        } else {
                            console.log();
                            fd.get('linkicon', $('#preIcon').attr('src'))
                        }
                        console.log(id, 'id', file);
                        fd.forEach((value, key) => {
                            console.log(key, value);
                        })
                        $.ajax({
                            type: 'PUT',
                            // 可以渲染上但是报错
                            url: `/admin/links/${id}`,
                            data: fd,
                            processData: false,
                            contentType: false,
                            success: function(res) {
                                if (res.status === 0) {
                                    // 编辑成功
                                    layer.close(editIndex)
                                    renderCategory();
                                }
                            }
                        })
                    })
                }
            })


        }
    });

})


//======================================删除类别=========================================
$('tbody').on('click', 'button:contains("删除")', function() {
    let id = $(this).data('id');
    // console.log(this)
    layer.confirm('确定要删除吗？', function(index) {
        $.ajax({
            type: 'delete',
            url: '/admin/links/' + id,
            data: { id: id },
            success: function(res) {
                console.log(res)
                if (res.status === 0) {
                    layer.msg(res.message);
                    renderCategory()
                }
            }
        })

        layer.close(index);
    });

})